<template>
    <div style="padding: 16px;">
        <div style="margin-bottom: 10px;">组件主要内容: Props, Emits, Slot, Provide, Inject, v-model</div>
        <div style="margin-bottom: 10px;">{{ propString }} : {{ propUser }} : {{ propObject.username }}</div>
        
        <div style="margin-bottom: 10px;">{{ propCount }}<el-button size="small" type="primary" @click="onAddCount">plus</el-button></div>
        
        <div style="margin-bottom: 10px;">
            <el-input v-model="modelCount" />
            <slot></slot>
        </div>

        <div>{{ injectStr }}</div>
    </div>
</template>

<script setup>
import { ref, watch, useAttrs, inject } from 'vue'

defineOptions({
    inheritAttrs: false // 禁用 Attributes 继承
})

// 包含父组件所有透传的 attribute
const attrs = useAttrs() 

const props = defineProps({
    propCount: {
        type: Number,
        default: 0
    },
    propString: {
        type: String,
        required: true,
        default: 'default message'
    },
    propObject: {
        type: Object,
        default(sourceProp) {
            return {
                id: '123456',
                username: 'hcxowe'
            }
        }
    },
    propUser: {
        validator(value, props) {
            return ['success', 'warning', 'danger'].includes(value)
        }
    }
})

const modelCount = defineModel({
    required: true
})

const emit = defineEmits(['change'])

watch(() => props.propString, (newValue, oldValue) => {
    console.log('propString change', newValue, oldValue)
})

const onAddCount = () => {
    emit('change', props.propCount + 1)
}

const injectStr = inject('provideStr', 'default value')
</script>

<style scoped>

</style>